<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>视频录制</title>
  <style>
    * {
      margin: 20px;
      box-sizing: border-box;
    }

    #canvas {
      width: 640px;
      height: 480px;
      background: deepskyblue;
      display: block;
      border-radius: 2px;
      box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.12);
    }

  </style>
</head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
  let $canvas = document.querySelector("#canvas");
  let startButton = document.querySelector("#button-start");
  let stopButton = document.querySelector("#button-stop");
  const $video = document.createElement('video');
  let chunks = [];

  $video.width = 640;
  $video.height = 480;

  //设置画布背景
  const ctx = $canvas.getContext("2d");
  ctx.fillStyle = "deepskyblue";
  ctx.fillRect(0, 0, 640, 480);

  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then((stream) => {
      $video.srcObject = stream;
      $video.play();
      captureFrame();
    });

  // 收集录制数据
  const captureFrame = () => {
    ctx.drawImage($video, 0, 0, 640, 480);
    requestAnimationFrame(captureFrame)
  };

  stopButton.onclick = e => {
    startButton.disabled = false;
    stopButton.disabled = true;
  };

</script>
</body>
</html>
